<template>
	<div class="page">
		<div style="background-color: #FFFFFF;padding: 12px;height: 36px;">
			<div style="padding: 12px;height: 36px;background-color: #f5f7fb;border-radius: 18px;line-height: 35px;
                    padding:0 12px;display: flex;align-items: center;">
				<div style="flex: 1;" @click=cateViewClickHandle()>
					{{cates[cateidx]}}
				</div>
				<i class="Icon">expand_more</i>
			</div>
		</div>

		<!-- foodlist -->
		<div id="foodlist" style="overflow-y: auto;background-color: #f5f7fb;flex: 1;">
			<div id="cate" v-for="(item,idx) in cates.length" :key="idx">
				<div style="display: flex;margin-top: 10px;background-color: #FFFFFF;padding: 12px;border: 1px solid #EBEBEB;"
					v-for="(item,index) in info.foods" :key="index" @click="foodItemClickHandle(item)">
					<van-image :src="item.img" mode="" style="width: 70px;height: 70px;border: 1px solid #EBEBEB;">
					</van-image>
					<div style="flex: 1;padding-left: 12px;line-height: 16px;display: flex;flex-direction: column;">
						<div style="font-size: 14px;word-wrap: break-word;word-break: break-word;flex: 1;">
							{{item.name}}
						</div>
						<div style="flex: 1;font-size: 12px;color: #999999;">
							some descsome descsome descsome descsome descsome desc
						</div>
						<div>
							<!-- food -->
							<div style="display: flex;align-items: center;">
								<div style="font-size: 12px;">$</div>
								<div style="font-size: 16px;font-weight: bold;">{{item.price}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- end foodlist -->



		<!-- shopcar -->
		<div class="shopcar" @click="shopCarHandle()">
			<i class="Icon" style="color: #4CD964;">shopping_bag</i>
			<div style="position: absolute;top: 0;right: 0;background-color: #ff0000;width: 16px;height: 16px;display: flex;justify-content: center;align-items: center;
			border-radius: 10px;" v-if="shopcarNum>0">
				<div style="color: #FFFFFF;font-size: 10px;">{{shopcarNum}}</div>
			</div>
		</div>



		<van-popup v-model="showModal" position="bottom" :style="{ height: '60%' }">
			<div v-for="(item,idx) in cates" :key="idx" style="padding: 12px;border-bottom: 1px solid #EBEBEB;"
				@click="scrollTo(idx)">
				{{item}}
			</div>
		</van-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				cates: [
					"分类0",
					"分类1",
					"分类2",
					"分类3",
					"分类4",
					"分类5",
					"分类6",
				],
				cateidx: 0,
				showModal: false,
				buyType: -1,
				addedFoods: [],
				info: {
					"name": "胜意大酒店·海鲜自助餐厅（三亚湾路店）",
					phone: "0898-88915522",
					img: "https://p0.meituan.net/biztone/6828281_1629172615728.jpeg@380w_214h_1e_1c",
					desc: "地址：天涯区三亚湾路35号胜意大酒店1楼（吉祥街与三亚湾路交汇处）（胜意大酒店内一楼）",
					foods: [{
						name: "海鲜无限量供应BBQ自助晚餐",
						img: "https://p1.meituan.net/208.126/deal/d7e22604fe3872715897494305612c0254275.jpg@100w_100h_1e_1c",
						price: "208",

					}, {
						name: "海鲜自助午餐火锅",
						img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
						price: "208",

					}, {
						name: "海鲜自助午餐火锅",
						img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
						price: "208",

					}, {
						name: "海鲜自助午餐火锅",
						img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
						price: "208",

					}, {
						name: "海鲜自助午餐火锅",
						img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
						price: "208",

					}, {
						name: "海鲜自助午餐火锅",
						img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
						price: "208",

					}, {
						name: "儿童自助晚餐",
						img: "https://p0.meituan.net/208.126/deal/9d044934a49009a58e701354830c1dfc766911.jpg@100w_100h_1e_1c",
						price: "208",

					}]
				},
				shopcarNum: 0,
			}
		},
		mounted() {
			let dom = document.getElementById("foodlist")
			dom.addEventListener('scroll', this.onScroll, false)
			let json = localStorage.getItem("shopcar");
			if (json != undefined && json.length != 0) {
				let order = JSON.parse(json)
				this.shopcarNum = order.foods.length;
			}
		},
		methods: {
			backHandle() {
				this.$router.go(-1)
			},

			onScroll() {
				let dom = document.getElementById("foodlist")
				// 获取所有锚点元素
				const navContents = document.querySelectorAll('#cate')
				// 所有锚点元素的 offsetTop
				const offsetTopArr = []
				navContents.forEach(item => {
					offsetTopArr.push(item.offsetTop)
				})
				// 获取当前文档流的 scrollTop
				const scrollTop = dom.scrollTop || document.body.scrollTop
				// 定义当前点亮的导航下标
				let navIndex = 0
				for (let n = 0; n < offsetTopArr.length; n++) {
					// 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
					// 那么此时导航索引就应该是n了
					if (scrollTop >= offsetTopArr[n]) {
						navIndex = n
					}
				}
				this.cateidx = navIndex;
				this.active = navIndex
			},

			scrollTo(idx) {
				let dom = document.getElementById("foodlist")
				
				this.cateidx = idx;
				this.showModal = false;

				// 获取目标的 offsetTop
				const targetOffsetTop = document.querySelectorAll(`#foodlist #cate`)[idx].offsetTop
				// 获取当前 offsetTop
				let scrollTop = dom.scrollTop || document.body.scrollTop
				// 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋
				const STEP = 100
				// 判断是往下滑还是往上滑
				if (scrollTop > targetOffsetTop) {
					// 往上滑
					smoothUp()
				} else {
					// 往下滑
					smoothDown()
				}
				// 定义往下滑函数
				function smoothDown() {
					// 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
					if (scrollTop < targetOffsetTop) {
						// 如果和目标相差距离大于等于 STEP 就跳 STEP
						// 否则直接跳到目标点，目标是为了防止跳过了。
						if (targetOffsetTop - scrollTop >= STEP) {
							scrollTop += STEP
						} else {
							scrollTop = targetOffsetTop
						}
						document.body.scrollTop = scrollTop
						dom.scrollTop = scrollTop
						// 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
						requestAnimationFrame(smoothDown)
					}
				}
				// 定义往上滑函数
				function smoothUp() {
					if (scrollTop > targetOffsetTop) {
						if (scrollTop - targetOffsetTop >= STEP) {
							scrollTop -= STEP
						} else {
							scrollTop = targetOffsetTop
						}
						document.body.scrollTop = scrollTop
						document.documentElement.scrollTop = scrollTop
						requestAnimationFrame(smoothUp)
					}
				}
				// end

			},

			cateViewClickHandle() {
				this.showModal = true;
			},

			foodItemClickHandle(item) {
				console.log(item)


				this.$router.push({
					path: "/food"
				})
			},
			shopCarHandle() {
				this.$router.push({
					path: "/shopcar",
				})
			}

		}
	}
</script>


<style>
	.van-index-bar__sidebar {
		display: none;
	}
</style>

<style scoped>
	.page {
		height: 100vh;
		flex: 1;
		position: relative;
		background-color: #FFFFFF;
		padding-bottom: 64px;
		display: flex;
		flex-direction: column;
	}

	.shopcar {
		height: 44px;
		width: 44px;
		border-radius: 22px;
		background-color: #FFFFFF;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 20px;
		right: 12px;
		display: flex;
		align-items: center;
		justify-content: center;

		margin-top: constant(safe-area-inset-top);
		margin-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		margin-top: env(safe-area-inset-top);
		margin-bottom: env(safe-area-inset-bottom);

	}

	.navbar {
		height: 40px;
		position: fixed;
		left: 0;
		top: 20px;
		padding-left: 12px;
		display: flex;
		align-items: center;

		margin-top: constant(safe-area-inset-top);
		margin-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		margin-top: env(safe-area-inset-top);
		margin-bottom: env(safe-area-inset-bottom);

	}
</style>
